<template>
  <view class="index">
    <!-- 搜索框 -->
    <YgSearch></YgSearch>
    <!-- 轮播图 -->
    <u-swiper height="340" border-radius="0" :list="swiperdata"></u-swiper>
    <!-- 分类 -->
    <u-grid :col="4" :border="false">
      <u-grid-item v-for="(item, index) in catitems" :key="index">
        <u-icon :name="item.image_src" :size="128"></u-icon>
      </u-grid-item>
    </u-grid>
    <!-- 时尚女装 -->
    <view class="imgBox" v-for="(item, index) in floordata" :key="index">
      <view class="floor_title">
        <u-image :src="item.floor_title.image_src" mode="widthFix"></u-image>
      </view>
      <view class="product_list">
        <image
          v-for="(item2, index2) in item.product_list"
          :key="index2"
          :src="item2.image_src"
          mode="widthFix"
          @tap="jump(item2.navigator_url)"
        ></image>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 轮播图
      swiperdata: [],
      // 分类导航数据
      catitems: [],
      // 楼层数据
      floordata: [],
    };
  },
  async onLoad() {
    this.getHomeSwiperData();
    this.getHomeCatitemsData();
    this.getHomeFloorData();
  },
  methods: {
    /**首页轮播图 */
    async getHomeSwiperData() {
      // 使用uview的内置发送请求的写法是ok
      const res = await this.$u.api.getHomeSwiperData();
      // 改造轮播图数据
      this.swiperdata = res.message.map((v) => {
        return {
          ...v,
          image: v.image_src,
        };
      });
      console.log(this.swiperdata);
    },
    /**获取分类，导航数据 */
    async getHomeCatitemsData() {
      // 获取分类，导航数据
      const res = await this.$u.api.getHomeCatitemsData();
      // 分类 导航数据
      this.catitems = res.message;
    },
    /**获取楼层图片 */
    async getHomeFloorData() {
      const res = await this.$u.api.getHomeFloorData();
      this.floordata = res.message;
    },
    jump(url){
      console.log(url);
      const query = url.split("?")[1].split("=")[1]
       this.$u.route("/pages/goods_list/goods_list", {
        query:query,
      });
    }
  },
};
</script>

<style lang="scss" scoped>
.imgBox {
  margin-top: 23rpx;
  padding: 10rpx 0 0 12rpx;
  .product_list {
    overflow: hidden;
    & > image:nth-last-child(-n + 4) {
      height: 188rpx !important;
      margin-bottom: 12rpx;
    }
    image {
      float: left;
      width: 233rpx;
      margin-right: 13rpx;
      vertical-align: middle;
    }
  }
}
</style>